<template>
  <div class="body center">
    <div class="container">
      <div class="topContainer">
        <span :class="type == -1 ? 'active' : ''" @click="changeType(-1)"
          >全部</span
        >
        <span
          v-for="item in types"
          :key="item.id"
          :class="type == item.id ? 'active' : ''"
          @click="changeType(item.id)"
          >{{ item.name }}</span
        >
      </div>
      <div class="mainContainer">
        <div class="article">
          <div class="articleItem" v-for="item in topics" :key="item.topic_id">
            <template v-if="item.state == 1">
              <!-- 标题 -->
              <router-link :to="'/article/' + item.topic_id" class="itemTop">{{
                item.title
              }}</router-link>
              <div class="itemBot">
                <!-- 用户信息 -->
                <div class="userInfo">
                  <template>
                    <el-popover placement="bottom" trigger="hover">
                      <div class="popUserBox">
                        <div class="leftBox">
                          <div class="avatar">
                            <img :src="$url + item.user.avatar_url" alt="" />
                          </div>
                          <div class="userInfo">
                            <div class="username">
                              {{ item.user.username }}<br />
                            </div>
                            <div class="buttonBox">
                              <el-button
                                size="mini"
                                type="primary"
                                icon="iconfont icon-shujia"
                                circle
                                @click="toUserHome(item.user.user_id)"
                              ></el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <template v-slot:reference>
                        <div
                          class="avatar"
                          @click="toUserHome(item.user.user_id)"
                        >
                          <img :src="$url + item.user.avatar_url" />
                        </div>
                      </template>
                    </el-popover>
                  </template>

                  <div class="username" @click="toUserHome(item.user.user_id)">
                    {{ item.user.username }}
                  </div>
                </div>
                <!-- 简介 -->
                <div class="itemTitle">
                  {{ returnText(item.content) }}
                </div>
                <!-- 文章信息 -->
                <div class="articleInfo">
                  <div class="item">
                    <i class="el-icon-view"></i>
                    <div class="number">{{ item.views }}</div>
                  </div>
                  <div class="line"></div>
                  <div class="item">
                    <i class="el-icon-chat-dot-round"></i>
                    <div class="number">{{ item.comments.length }}</div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total,  prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPagingTopic, getTopicTypes } from '../api/topic';
export default {
  data() {
    return {
      currentPage: 1,
      topics: [],
      types: [],
      total: 0,
      pageSize: 5,
      type: -1,
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getAllTopicByPaging();
    },
    async getAllTopicByPaging() {
      if (this.type == -1) this.type = '';
      const res = await getPagingTopic({
        limit: this.pageSize,
        offset: this.currentPage,
        type: this.type,
      });
      this.topics = res.rows.filter((item) => {
        return item.state == 1;
      });
      this.total = res.count;
    },
    changeType(id) {
      this.type = id;
      this.currentPage = 1;
      this.getAllTopicByPaging();
    },
    async getTopicTypes() {
      const res = await getTopicTypes();
      if (res.code != 200) {
        this.$message.error('获取分类列表错误，请刷新页面');
      }
      this.types = res.data;
    },
    returnText(htmlStr) {
      var text = htmlStr.replace(/<[^<>]+>/g, '');
      return text;
    },
    toUserHome(user_id) {
      this.$router.push({
        name: 'user',
        params: {
          user_id,
        },
      });
    },
  },
  created() {
    this.getAllTopicByPaging();
    this.getTopicTypes();
  },
};
</script>

<style lang="less" scoped>
.body {
  margin-top: 15px;
  width: 1280px;
  min-width: 1280px;

  .container {
    width: 100%;
    .topContainer {
      width: 100%;
      padding: 4px 3px;
      box-sizing: border-box;
      background-color: #f6f6f6;
      font-size: 0;
      span {
        cursor: pointer;
        display: inline-block;
        color: #80bd01;
        padding: 3px 10px;
        border-radius: 3px;
        font-size: 14px;
        &:hover {
          color: #005580;
        }
      }
      .active {
        background-color: #80bd01;
        color: #fff;
      }
    }
    .mainContainer {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      box-sizing: border-box;
      .articleItem {
        border-bottom: 1px solid #f4f4f4;
        padding: 10px 20px;
        &:hover {
          background-color: #eee;
        }
        .itemTop {
          font-size: 18px;
          color: #000;
          &:hover {
            color: #fc5531;
          }
          cursor: pointer;
        }
        .itemBot {
          position: relative;
          display: flex;
          align-items: center;
          margin-top: 5px;
          cursor: text;
          .userInfo {
            cursor: pointer;
            display: flex;
            align-items: center;
            .avatar {
              width: 24px;
              height: 24px;
              img {
                border-radius: 50%;
                width: 100%;
              }
            }
            .username {
              margin-left: 5px;
              font-size: 14px;
              &:hover {
                color: #fc5531;
              }
            }
          }
          .itemTitle {
            padding-left: 16px;
            color: #8a8a8a;
            font-size: 14px;
            cursor: text;
          }
          .articleInfo {
            margin-left: auto;
            display: flex;
            align-items: center;

            .item {
              display: flex;
              align-items: center;
              .iconfont {
                width: 16px;
                height: 16px;
              }
              .number {
                padding-left: 3px;
                color: #349edf;
                font-size: 13px;
              }
            }
            .line {
              width: 1px;
              height: 12px;
              border-radius: 50%;
              background-color: #e0e0e0;
              margin-left: 8px;
              margin-right: 8px;
            }
          }
        }
      }
      .pagination {
        padding: 5px 20px;
      }
    }
  }
}
.popUserBox {
  width: 200px;
  .leftBox {
    height: 56px;
    display: flex;
    .avatar {
      width: 56px;
      img {
        width: 100%;
      }
    }
    .userInfo {
      flex-grow: 1;
      text-align: center;
      position: relative;
      .username {
        font-size: 15px;
      }
      .buttonBox {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>
